<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Privileged Users</title>
        <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
        <style type="text/css"> 
            #map {
                width: 600px;
                height: 400px;
                border: 1px solid #ccc;
            }
        </style> 
        <script src="GeometricNet.js"></script>
        <script src="road-network-config.js"></script>	
        <script type="text/javascript">
            var map = null;
            var myNetwork =null;

            function init(){			
                console.log("creating all");
                format="image/png";
                var bounds = new OpenLayers.Bounds(
                617817.75, 3047534.75,
                650331.75, 3077605.75
            );
                var options = {
                    controls: [],
                    maxExtent: bounds,
                    maxResolution: 127.0078125,
                    projection: "EPSG:3857",
                    units: 'm'
                };			
                map = new OpenLayers.Map('map', options);
                // setup tiled layer
                var tiled = new OpenLayers.Layer.WMS(
                "cite:ktm_roads01 - Tiled", "http://localhost:8080/geoserver/cite/wms",
                {
                    LAYERS: 'cite:ktm_roads01',
                    STYLES: '',
                    format: format,
                    tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true
                } 
            );	
                map.addLayers([tiled]);
                console.log("created osm");
			
                myNetwork = new GeometricNet.Network("testNet",map,network);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
			
                // create network controls
                zb = new OpenLayers.Control.ZoomBox(
                {title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."});
                mouseDefault =new OpenLayers.Control.MouseDefaults(
                {title:'You can use the default mouse configuration'}); 
                var editPanel = myNetwork.createEditPanel(true);
                console.log("editPanel controls: " + editPanel.length);
                editPanel.addControls([zb,mouseDefault]);
                editPanel.defaultControl = mouseDefault;
                map.addControl(editPanel);
			
                //describe feature on hover
                selectEdge = new OpenLayers.Control.SelectFeature([myNetwork.edge,myNetwork.node],{hover:true,onSelect: describeFeature});			
                map.addControl(selectEdge);
                selectEdge.activate();

                map.zoomToExtent(bounds);
                //console.log("Starting map");			
            }
        
            function describeFeature(feature){			
                var desc =  {};
                if (feature instanceof GeometricNet.Feature.Vector.Edge) {
                    desc = { feature_id : feature.fid,
                        start_node_id: feature.attributes.startNode,
                        end_node_id: feature.attributes.endNode
                    };
                } else if (feature instanceof GeometricNet.Feature.Vector.Node){
                    desc = { feature_id : feature.fid };
                    if (feature.attributes.startEdges){
                        var start_edges=[];
                        //console.log("startEdges :" +feature.attributes.startEdges.length);
                        for (var i=0;i<feature.attributes.startEdges.length;i++){
                            start_edges.push(feature.attributes.startEdges[i]);
                        }
                        desc.start_edges = start_edges;
                    }
                    if( feature.attributes.endEdges){
                        var end_edges=[];
                        for (var i=0;i<feature.attributes.endEdges.length;i++){
                            end_edges.push(feature.attributes.endEdges[i]);
                        }
                        desc.end_edges = end_edges;
                    }				
                }
                var descString = JSON.stringify(desc);
                var pices = descString.split(",");			
                for (var i=0;i < pices.length;i++){
                    pices[i] += ",\n";
                } 
                descString = pices.join("");			
                //console.log(descString);
                document.getElementById('output').value = descString;
            }
        </script>
    </head>
    <body onLoad="init()">
        <h3 id="title">&nbsp;</h3>
        <table>
<tr>
                <td><div id="map" class="smallmap"></div></td>
                <td><div><textarea id="output" cols="40" rows="24">Move mouse over the feature to see the network properties.</textarea></div></td>
            </tr></table>    
        <p>&nbsp;</P>
    </body>
</html>
